<template>
	<view>
	
		<view :style="{paddingTop :statusBarHeight + 'px'}"></view>
	
		<!-- #ifdef MP-WEIXIN -->
		<uni-nav-bar title="购物车" class="my_top_nav" :border="false" @clickLeft="onDelBtn" left-text="删除"></uni-nav-bar>
		<!-- #endif -->
		
		<!-- #ifdef APP-PLUS || H5 -->
		<uni-nav-bar title="购物车" class="my_top_nav" :border="false" @clickRight="onDelBtn" right-text="删除">
		</uni-nav-bar>
		<!-- #endif -->
		
		<view class="main">

			<view class="list">
				<view class="listItem flex-row" v-for="item in list" :key="item.id">
					<image class="choose" src="http://www.bobei.shop/static/login/choose.png" mode=""
						v-if="!item.status" @click.stop="onChoose(item)"></image>
					<image class="choose" src="http://www.bobei.shop/static/login/choosed.png" mode=""
						v-if="item.status" @click.stop="onChoose(item)"></image>
					<view class="listItemR" @click.stop="onGoodsListItem(item.goods.id)">
						<view class="popupInfoBox flex-row">
							<image class="thumb" :src="item.thumb"></image>
							<view class="infoR flex">
								<view class="title">
									{{ item.goodsName }}
									<!-- <text class="infoR_shop">
										伯贝商城
									</text> -->
								</view>
								<view class="info_sku" v-if="item.specTitle">
									产品规格：{{ item.specTitle }}
								</view>
								<!-- 	<scroll-view :scroll-x="true" style="width: 428rpx;">
									<view class="info_tips">
										<view >每人限购3件</view>
										<view>15天保价</view>
										<view>库存紧张</view>
									</view>
								</scroll-view> -->


								<view class="infoRB flex-between">
									<view class="infoRBPrice flex-row">
										<view class="market">
											¥{{item.price}}
										</view>

									</view>
									<my-stepper :amountObj="item.num" @stepperChange="stepperChange($event, item)"
										@stepperRes="stepperRes">
									</my-stepper>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="goodsTitleBox flex-around">
				<view class="left_line"></view>
				<view class="center_tips">
					<image class="aixin" src="http://www.bobei.shop/static/third/cart/xin.png" mode=""></image>
					您可能想买
				</view>
				<view class="right_line"></view>

			</view>


			<view class="waterfallBox">
				<view class="waterfall flex">
					<view class="wt-list wt-left flex">
						<view class="wt-item flex" v-for="item in LeftList" :key="item.id" @click="goGoodsDetails(item)">
							<image class="thumb" mode="widthFix" :src="item.thumbUrl"></image>
							<!-- 特卖标签 -->
							<view class="specialSale flex-center" v-if="item.isdiscount == 1">
								<image class="specialSaleImg" src="http://www.bobei.shop/static/third/teMaiIcon.png" mode=""></image>
							</view>

							<!-- 秒杀倒计时 -->
							<view class="countdownBox flex-center" v-if="item.isSpike == 1 && item.isdiscount != 1">
								<view class="countdownTitle">
									秒杀:
								</view>
								<uni-countdown :showDay="false" :hour="item.time_h" :minute="item.time_m"
									:second="item.time_s" color="#ffffff" splitorColor="#ffffff">
								</uni-countdown>
							</view>
							<!-- 商品信息 -->
							<view
								:class="[item.genre == 0 ? 'wt-item-info wt-item-info-bg-yellow' : 'wt-item-info wt-item-info-bg-white']">
								<!-- 标签 -->
								<!-- <scroll-view class="info-sign-scroll" :scroll-x="true"
									v-if="item.labelname && item.labelname.length && item.isSpike == 1">
									<view class="info-sign flex">
										<view class="info-sign-item flex-center"
											v-for="(item2,index2) in item.labelname" :key="index2">
											<view class="info-sign-item-title">
												{{ item2.label }}
											</view>
											<view class="info-sign-item-line"></view>
										</view>
									</view>
								</scroll-view> -->
								<!-- VIP标志 -->
								<view class="vipBox flex-center" v-if="item.genre == 0">
									<view class="vipTitle">
										推荐
									</view>
									<view class="vipLine"></view>
								</view>
								<view class="goodsBox">
									<view class="title threeHidden">
										{{ item.title }}
									</view>
									<!-- 商品标签 -->
									<scroll-view class="goodsSignScroll" :scroll-x="true"
										v-if="item.labelname && item.labelname.length && item.genre == 0">
										<view class="goodsSign flex-row">
											<view class="goodsSignItem flex-row"
												v-for="(item2,index2) in item.labelname" :key="index2">
												<view class="goodsSignItemTitle">
													{{ item2.label }}
												</view>
												<view class="goodsSignItemLine"></view>
											</view>
										</view>
									</scroll-view>
									<!-- 商品标签 -->
									<scroll-view class="goodsSignScroll" :scroll-x="true"
										v-if="item.labelname && item.labelname.length && item.hot == 1">
										<view class="goodsSign flex-row">
											<view class="goodsSignItem2" v-for="(item2,index2) in item.labelname"
												:key="index2">
												{{ item2.label }}
											</view>
										</view>
									</scroll-view>
									<!-- 价格 -->
									<view class="goodsPriceBox flex-between">
										<view class="goodsPrice">
											<view class="market">
												¥{{ item.marketprice }}
											</view>
											<view class="del">
												<view class="deltext">
													¥{{ item.productprice }}
												</view>
												<view class="delLine"></view>
											</view>
										</view>
										<image class="goodsCart" src="http://www.bobei.shop/static/third/goodsCart.png">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="wt-list wt-right flex">
						<view class="wt-item flex" v-for="item in RightList" :key="item.id" @click="goGoodsDetails(item)">
							<image class="thumb" mode="widthFix" :src="item.thumbUrl"></image>
							<view class="specialSale flex-center" v-if="item.isdiscount == 1">
								<image class="specialSaleImg" src="http://www.bobei.shop/static/third/teMaiIcon.png" mode=""></image>
							</view>

							<view class="countdownBox flex-center" v-if="item.isSpike == 1 && item.isdiscount != 1">
								<view class="countdownTitle">
									秒杀:
								</view>
								<uni-countdown :showDay="false" :hour="item.time_h" :minute="item.time_m"
									:second="item.time_s" color="#ffffff" splitorColor="#ffffff">
								</uni-countdown>
							</view>
							<view
								:class="[item.genre == 0 ? 'wt-item-info wt-item-info-bg-yellow' : 'wt-item-info wt-item-info-bg-white']">
								<!-- 标签 -->
								<!-- <scroll-view class="info-sign-scroll" :scroll-x="true"
									v-if="item.labelname && item.labelname.length && item.isSpike == 1">
									<view class="info-sign flex">
										<view class="info-sign-item flex-center"
											v-for="(item2,index2) in item.labelname" :key="index2">
											<view class="info-sign-item-title">
												{{ item2.label }}
											</view>
											<view class="info-sign-item-line"></view>
										</view>
									</view>
								</scroll-view> -->
								<!-- VIP标志 -->
								<view class="vipBox flex-center" v-if="item.genre == 0">
									<view class="vipTitle">
										推荐
									</view>
									<view class="vipLine"></view>
								</view>
								<view class="goodsBox">
									<view class="title threeHidden">
										{{ item.title }}
									</view>
									<!-- 商品标签 -->
									<scroll-view class="goodsSignScroll" :scroll-x="true"
										v-if="item.labelname && item.labelname.length && item.genre == 0">
										<view class="goodsSign flex-row">
											<view class="goodsSignItem flex-row"
												v-for="(item2,index2) in item.labelname" :key="index2">
												<view class="goodsSignItemTitle">
													{{ item2.label }}
												</view>
												<view class="goodsSignItemLine"></view>
											</view>
										</view>
									</scroll-view>
									<!-- 商品标签 -->
									<scroll-view class="goodsSignScroll" :scroll-x="true"
										v-if="item.labelname && item.labelname.length && item.hot == 1">
										<view class="goodsSign flex-row">
											<view class="goodsSignItem2" v-for="(item2,index2) in item.labelname"
												:key="index2">
												{{ item2.label }}
											</view>
										</view>
									</scroll-view>
									<!-- 价格 -->
									<view class="goodsPriceBox flex-between">
										<view class="goodsPrice">
											<view class="market">
												¥{{ item.marketprice }}
											</view>
											<view class="del">
												<view class="deltext">
													¥{{ item.productprice }}
												</view>
												<view class="delLine"></view>
											</view>
										</view>
										<image class="goodsCart" src="http://www.bobei.shop/static/third/goodsCart.png">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="listStatus"></uni-load-more>

		</view>

		<view class="bom flex-row">
			<image class="choose" src="http://www.bobei.shop/static/login/choose.png" mode="" v-if="!selectAll"
				@click="onSelectAll">
			</image>
			<image class="choose" src="http://www.bobei.shop/static/login/choosed.png" mode="" v-if="selectAll"
				@click="onCloseSelectAll"></image>
			<view class="bomR flex-between">
				<view class="bomRL flex-row">
					<view class="all">全选</view>
				</view>
				<view class="bomRR flex-between">
					<view class="bomRR_per flex-between">
						<view class="total">（不含运费）总价：</view>
						<view class="price">¥{{totalAmount}}</view>
					</view>
					<button :class="[differentStatus ? 'payBtn payBtnDis' : 'payBtn']" :disabled="differentStatus"
						@click="onPayBtn">去下单({{ chooseIdList.length }})</button>
				</view>
			</view>
		</view>

		<my-popup-tips :showTips="showTips" @tipsOpen="tipsOpen" @tipsClose="tipsClose">
			<template #default>
				<view class="tipsBox flex-row">
					<view class="tipsTitle flex-center">
						提示
					</view>

					<view class="failReason">
						{{ tipsText }}
					</view>

					<view class="tipsLine"></view>
					<view class="tipsBtnBox flex-center">
						<button class="sureBtn" :plain="true" @click="onSureBtn">确定</button>
					</view>
				</view>
			</template>
		</my-popup-tips>
		
		<!-- 删除购物车弹窗 -->
		<determined-popover :showTips="determinedShow" @tipsOpen="determineTipsOpen" @tipsClose="determineTipsClose"
			@onDeterClose="onDeterClose" @onPrefect="determineOnPrefect" :deterTitle="deterTitle"
			:deterContent="deterContent"></determined-popover>
	</view>
</template>

<script>
	import myStepper from "../../components/my-stepper/my-stepper.vue";
	import myPopupTips from "../../components/my-popup-tips/my-popup-tips.vue";
	import LoadList from "../../utils/mixins/LoadList";
	import determinedPopover from "../../components/determined-popover/determined-popover.vue"


	export default {
		mixins: [LoadList],
		components: {
			"my-stepper": myStepper,
			"my-popup-tips": myPopupTips,
			"determined-popover": determinedPopover,
		},
		data() {
			return {
				determinedShow: false,
				deterTitle: "",
				deterContent: "",
				
				selectAll: false,
				chooseIdList: [],
				different: 0,
				statusBarHeight: 0,

				differentStatus: false,
				showTips: false,
				tipsText: "不同种类产品不可以一起结算",
				list: [],

				form: {
					page: 1,
					lastId: 0,
				},
				loading: false,
				finished: false,
				goodList: [],
				LeftList: [],
				RightList: [],
			}
		},
		watch: {
			chooseIdList: {
				handler(newVal) {
					this.selectAll = this.list.length && newVal.length == this.list.length;
					try {
						let type = null;
						for (const item of this.list) {
							if (!newVal.includes(item.id)) continue;
							if (type === null) type = item.goods.genre;
							else if (type !== item.goods.genre) throw new Error("不同种类产品不可以一起结算");
						}
						// 选择中的商品种类相同
						this.differentStatus = false;
					} catch (e) {
						// 选择中的商品种类不同
						this.differentStatus = true;
						this.tipsText = e.message;
						this.showTips = true;
					}
				},
				deep: true
			},
		},
		onLoad() {
			this.statusBarHeight = this.$mySysInfo().top;
		},
		onShow() {
			this.chooseIdList = [];
			this.form.page = 1;
			this.form.lastId = 0;
			this.loading = false;
			this.finished = false;
			this.goodList = [];
			this.getHotGoodsList();
		},
		onReachBottom() {
			this.getHotGoodsList()

		},
		onNavigationBarButtonTap(e) {
			this.onDelBtn()
		},
		methods: {
			onDelBtn() {
				if (!this.chooseIdList.length) return uni.showToast({
					title: "请选择商品",
					icon: "none",
					duration: 1500,
				})
				
				this.deterTitle = "删除购物车";
				this.deterContent = "确定要删除选中的商品吗？";
				this.determinedShow = true;
			},
			determineTipsOpen(param) {
				this.determinedShow = param;
			},
			determineTipsClose(param) {
				this.determinedShow = param;
			},
			onDeterClose() {
				this.determinedShow = false;
			},
			determineOnPrefect() {
			this.$post({
				url: "/portal/Shop",
				module: "Cart",
				interface: "1002",
				data: {
					id: this.chooseIdList
				}
			}).then(() => {
				this.determinedShow = false;
				uni.showToast({
					title: "删除成功",
					icon: "none",
					duration: 1500,
				})
				this.chooseIdList = [];
				setTimeout(() => this.onRefresh(), 1000)
			})
			},
			
			onGoodsListItem(id) {
				uni.navigateTo({
					url: "/home/goodsDetails?id=" + id
				})
			},
			goGoodsDetails(param) {
				if (param.isSpike == 1 && param.ishot != 1) {
					this.goGoodsDetails2(param, "seckill");
				} else {
					uni.navigateTo({
						url: "/home/goodsDetails?id=" + param.id,
					})
				}

			},
			goGoodsDetails2(param, seckill) {
				uni.navigateTo({
					url: `/home/spikeDetails?id=${param.isSpikeInfo.id}&seckill=${seckill}`
				})
			},
			getHMS(timestamp) {
				let date = timestamp * 1000;
				let now = new Date().getTime();
				let times = date - now;
				let seconds = Math.floor(times / 1000);
				let minutes = Math.floor(seconds / 60);
				let hours = Math.floor(minutes / 60);
				minutes %= 60;
				seconds %= 60;
				let h = hours;
				let m = minutes.toString().padStart(2, '0');
				let s = seconds.toString().padStart(2, '0');
				return {
					h,
					m,
					s
				}
			},
			getHotGoodsList() {
				if (this.loading || this.finished) return;
				this.loading = true;
				this.$post({
					url: '/portal/Shop',
					module: 'Goods',
					interface: 9000,
					data: this.form,
				}).then(res => {
					// console.log("首页", res)
					this.goodList = [...this.goodList, ...res.list];
					this.goodList.forEach((item) => {
						if (item.isSpike == 1) {
							let time = this.getHMS(item.isSpikeInfo.overTime);
							item.time_h = Number(time.h);
							item.time_m = Number(time.m);
							item.time_s = Number(time.s);
						}

					})
					this.LeftList = [];
					this.RightList = [];

					// 将商品信息列表分为左侧右侧两个部分
					for (let i = 0; i < this.goodList.length; i++) {
						if (i % 2 === 0) {
							this.LeftList.push(this.goodList[i]);
						} else {
							this.RightList.push(this.goodList[i]);
						}
					}
					// console.log("this.LeftList:", this.LeftList, "this.RightList:", this.RightList)
					this.form.page = res.currentPage + 1;
					this.form.lastId = res.lastId;
					if (this.form.page > res.lastPage) {
						this.finished = true;
					}
					this.loading = false;

				}).catch(() => {
					this.loading = false;
				})
			},

			stepperChange(changeNum, item) {
				const orignNum = item.num;
				item.num = changeNum;
				this.$post({
						url: "/portal/Shop",
						module: "Cart",
						interface: "1001",
						data: {
							id: item.id,
							num: changeNum
						}
					})
					.catch(() => item.num = orignNum)
			},
			stepperRes() {
				// console.log("步进器改变后做数据处理")
			},
			onChoose(param) {
				this.list.forEach((item, index) => {
					if (item.id == param.id) {
						// console.log("单个选", item.status)
						if (!item.status) { // 选中
							if (this.chooseIdList.indexOf(item.id) == -1) {
								this.chooseIdList.push(item.id);
								// console.log("选中", this.chooseIdList)
							}
							item.status = true;
						} else { // 取消选中
							this.chooseIdList.splice(this.chooseIdList.indexOf(item.id), 1);
							item.status = false;
							// console.log("取消选中", this.chooseIdList)
						}
					}
				})
			},
			// 全选
			onSelectAll() {
				this.selectAll = true;
				this.chooseIdList = [];
				this.list.forEach((item, index) => {
					item.status = true;
					this.chooseIdList.push(item.id);
				})
				// console.log("全选", this.chooseIdList)
			},
			onCloseSelectAll() {
				this.selectAll = false;
				this.chooseIdList = [];
				this.list.forEach((item, index) => {
					item.status = false;
				})
				// console.log("全部不选", this.chooseIdList)
			},
			onPayBtn() {
				if (!this.chooseIdList.length) {
					this.tipsText = "请选择要结算的商品";
					this.showTips = true;
					return;
				}
				// // console.log("去付款");
				uni.navigateTo({
					url: "/home/submitOrder2?carts=" + this.chooseIdList.join(","),
				})
			},
			
			onSureBtn() {
				this.showTips = false;
			},
			tipsOpen(param) {
				// console.log("tips弹出", param)
			},
			tipsClose(param) {
				// console.log("tips关闭", param)
			},
			async loadHandler(form) {
				const response = await this.$post({
					url: "/portal/Shop",
					module: "Cart",
					interface: "1005",
					data: form,
				})
				if (this.chooseIdList.length) {
					const checkList = Array.from(this.chooseIdList);
					response.list.forEach(item => {
						const index = checkList.indexOf(item.id);
						if (index === -1) item.status = false;
						else(item.status = true) && checkList.splice(index, 1)
					})
				} else {
					response.list.forEach(item => item.status = false)
				}
				return response;
			}
		},
		computed: {
			totalAmount() {
				const checkList = Array.from(this.chooseIdList);
				const amount = this.list.reduce((amount, item) => {
					const index = checkList.indexOf(item.id);
					if (index === -1) return amount;
					checkList.splice(index, 1);
					return amount + Number(item.price) * item.num;
				}, 0)
				return amount > 0 ? amount.toFixed(2) : "0.00";
			},
			listStatus() {
				if (this.finished) return "noMore";
				if (this.loading) return "loading";
				return "more";
			},
		},
		firstload: true,

	}
</script>

<style lang="scss" scoped>
	.my_top_nav {
		/deep/.uni-nav-bar-text {
			font-size: 30rpx;
			font-weight: 600;
		}
	}

	.main {
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
		overflow-x: hidden;
		overflow-y: auto;
		padding: 0rpx 32rpx 112rpx;
		position: relative;




		.list {
			width: 100%;

			.listItem {
				box-shadow: 2rpx 2rpx 10rpx 0rpx rgba(202, 202, 202, 0.25);
				border-radius: 30rpx;
				padding-left: 20rpx;
				margin-top: 30rpx;

				.listItemR {
					flex: 1;
					padding: 20rpx 0 20rpx 20rpx;
					// margin-top: 20rpx;

					.popupInfoBox {
						.thumb {
							width: 168rpx;
							height: 168rpx;
							border-radius: 16rpx;
						}

						.infoR {
							flex: 1;
							height: 180rpx;
							padding: 10rpx 0 0 10rpx;
							position: relative;
							flex-direction: column;
							justify-content: space-between;

							.title {
								// height: 88rpx;
								font-size: 30rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #000000;
								// text-indent: 3em;
								line-height: 44rpx;
								overflow: hidden; //超出的文本隐藏
								display: -webkit-box;
								-webkit-line-clamp: 2; // 超出多少行
								-webkit-box-orient: vertical;

								// .infoR_shop {
								// 	min-width: 80rpx;
								// 	height: 30rpx;
								// 	background-color: #F86C3E;
								// 	font-size: 16rpx;
								// 	text-align: center;
								// 	color: #FFFFFF;
								// 	line-height: 30rpx;
								// 	text-indent: 0;
								// 	position: absolute;
								// 	left: 10rpx;
								// 	top: 20rpx;
								// }

							}

							.info_sku {
								font-size: 16rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								margin-top: 16rpx;
							}

							.info_tips {
								width: 428rpx;
								display: flex;
								align-items: center;
								margin-top: 20rpx;

								view {
									height: 28rpx;
									background: #FCEEF3;
									border-radius: 8rpx 8rpx 8rpx 8rpx;
									opacity: 1;
									border: 2rpx solid #F2615F;
									font-size: 16rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: 400;
									color: #DA93A5;
									line-height: 18rpx;
									text-align: center;
									line-height: 28rpx;
									margin-right: 20rpx;
								}
							}

							.infoRB {
								width: 100%;
								// position: absolute;
								// bottom: 0;
								// left: 0;
								// z-index: 1;
								padding: 0 32rpx 0 10rpx;

								.infoRBPrice {

									.market {
										font-size: 32rpx;
										font-family: PingFangSC-Medium, PingFang SC;
										font-weight: 500;
										color: #000000;
										line-height: 48rpx;
									}

								}

								.stepper {
									.stepperBtn {
										width: 40rpx;
										height: 40rpx;
									}

									.stepperIpt {
										width: 60rpx;
										height: 40rpx;
										font-size: 28rpx;
										font-family: PingFangSC-Medium, PingFang SC;
										font-weight: 500;
										color: #000000;
										text-align: center;
									}
								}
							}
						}
					}
				}
			}
		}

		.goodsTitleBox {
			width: 100%;
			padding: 0 30rpx;
			margin-top: 68rpx;

			.left_line {
				width: 132rpx;
				height: 0rpx;
				opacity: 1;
				border: 2rpx solid;
				border-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(248, 107, 64, 1)) 1 1;
			}

			.center_tips {
				font-size: 28rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #7A797A;
				display: flex;
				align-items: center;

				.aixin {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}

			.right_line {
				width: 40rpx;
				width: 132rpx;
				height: 0rpx;
				opacity: 1;
				border: 2rpx solid;
				border-image: linear-gradient(117deg, rgba(249, 108, 65, 1), rgba(255, 255, 255, 1)) 1 1;
			}

			.goodsTitleL {
				.line {
					width: 6rpx;
					height: 36rpx;
					background: #F2615F;
					border-radius: 4rpx;
				}

				.goodsTitle {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
					line-height: 40rpx;
					padding-left: 20rpx
				}
			}

			.goodsTitleBtn {
				padding: 0;
				margin: 0;
				border: none;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #736464;
				line-height: 32rpx;
			}

		}

		.waterfallBox {
			margin: 24rpx auto 0;
			width: 692rpx;

			.waterfall {
				width: 100%;
				overflow: hidden;

				.wt-list {
					flex-direction: column;
					width: 332rpx;
					margin-right: 30rpx;


					.wt-item {
						margin-bottom: 16rpx;
						background-color: #ffffff;
						border-radius: 24rpx;
						position: relative;
						/* 裁切 圆角*/
						overflow: hidden;
						box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(212, 212, 212, 0.25);
						flex-direction: column;

						.thumb {
							width: 100%;
							min-height: 20rpx !important;
						}

						.specialSale {
							width: 70rpx;
							height: 36rpx;
							background: linear-gradient(90deg, #F76F4C 0%, #F85954 100%);
							border-radius: 24rpx 0rpx 24rpx 0rpx;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 1;
							.specialSaleImg {
								width: 36rpx;
								height: 26rpx;
							}
						}

						.discounts {
							font-size: 16rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							width: 108rpx;
							height: 32rpx;
							background: linear-gradient(90deg, #FD9522 0%, #F4665C 100%);
							border-radius: 24rpx 0rpx 24rpx 0rpx;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 1;
						}

						.countdownBox {
							width: 200rpx;
							height: 36rpx;
							background: linear-gradient(90deg, #FD9522 0%, #F4665C 100%);
							border-radius: 24rpx 0rpx 24rpx 0rpx;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 1;

							.countdownTitle {
								font-size: 16rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								color: #FFFFFF;
								white-space: nowrap;
							}
							
							/deep/.uni-countdown__number {
								width: auto !important;
							}

							/deep/.uni-countdown {
								padding-bottom: 6rpx;
							}

							/deep/.uni-countdown__number span {
								font-size: 16rpx;
							}

							/deep/.uni-countdown__splitor span {
								font-size: 16rpx;
							}
						}

						.wt-item-info {
							width: 100%;
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							padding: 22rpx 12rpx 20rpx;
							position: relative;

							.info-sign-scroll {
								width: 200rpx;
								position: absolute;
								top: -20rpx;
								left: 18rpx;
								z-index: 1;
							}

							.info-sign {
								width: 200rpx;
								height: 32rpx;
								background: linear-gradient(270deg, #F3645D 0%, #FC9520 100%);
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								overflow-x: auto;
								padding: 0 10rpx;

								.info-sign-item {
									.info-sign-item-title {
										font-size: 16rpx;
										font-family: PingFang SC-Regular, PingFang SC;
										font-weight: 400;
										color: #FFFFFF;
										white-space: nowrap;
									}

									.info-sign-item-line {
										width: 2rpx;
										height: 14rpx;
										background-color: #ffffff;
										margin: 0 6rpx;
									}
								}
							}

							.vipBox {
								flex-direction: column;
								width: 90rpx;
								height: 60rpx;
								background: #FEEAA0;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								position: absolute;
								z-index: 1;
								top: -40rpx;
								left: 30rpx;

								.vipTitle {
									font-size: 28rpx;
									font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
									font-weight: bold;
									color: #8F5F10;
									font-style: italic;
								}

								.vipLine {
									width: 52rpx;
									height: 6rpx;
									background: #8F5F10;
									border-radius: 18rpx 18rpx 18rpx 18rpx;
								}
							}

							.goodsBox {
								padding: 8rpx;
								background-color: #ffffff;
								border-radius: 24rpx;

								.title {
									font-size: 28rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: bold;
									color: #000000;
								}

								.goodsSignScroll {
									width: 300rpx;
								}

								.goodsSign {
									width: 300rpx;
									margin-top: 8rpx;

									.goodsSignItem {
										.goodsSignItemTitle {
											font-size: 20rpx;
											font-family: PingFang SC-Regular, PingFang SC;
											font-weight: normal;
											color: #A6A5A6;
											white-space: nowrap;
										}

										.goodsSignItemLine {
											width: 2rpx;
											height: 22rpx;
											background-color: #A6A5A6;
											margin: 0 16rpx;
										}
									}

									.goodsSignItem2 {
										font-size: 16rpx;
										font-family: PingFang SC-Regular, PingFang SC;
										font-weight: normal;
										color: #DA93A5;
										padding: 4rpx 6rpx;
										background: #FCEEF3;
										border-radius: 8rpx;
										border: 2rpx solid #F2615F;
										white-space: nowrap;
										margin-right: 12rpx;
									}
								}

								.goodsPriceBox {
									margin-top: 12rpx;

									.goodsPrice {
										.market {
											font-size: 28rpx;
											font-family: PingFang SC-Medium, PingFang SC;
											font-weight: 500;
											color: #E4883A;
										}

										.del {
											position: relative;

											.deltext {
												font-size: 20rpx;
												font-family: PingFang SC-Medium, PingFang SC;
												font-weight: normal;
												color: #CFCDCF;
											}

											.delLine {
												width: 100%;
												height: 2rpx;
												background-color: #CFCDCF;
												position: absolute;
												left: 0;
												top: 50%;
												transform: translate(0, -50%);
											}
										}
									}

									.goodsCart {
										width: 48rpx;
										height: 48rpx;
									}
								}
							}

						}

						.wt-item-info-bg-white {
							background: #ffffff;
						}

						.wt-item-info-bg-yellow {
							background: linear-gradient(180deg, #FEEAA1 0%, #FEE589 100%);
							margin-top: -16rpx;
						}
					}
				}

				.wt-list:nth-last-of-type(1) {
					margin-right: 0;
				}
			}
		}

	}

	.bom {
		width: 100%;
		height: 112rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		z-index: 1;
		padding: 0 32rpx;

		.bomR {
			flex: 1;
			padding-left: 20rpx;

			.bomRL {
				.all {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 40rpx;
				}

				.total {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 40rpx;
					margin-left: 32rpx
				}

				.price {
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
					line-height: 48rpx;
				}
			}

			.bomRR {
				.bomRR_per {
					font-size: 24rpx;
					font-family: 蘋方-簡-標準體, 蘋方-簡;
					font-weight: normal;
					color: #000000;
					padding-right: 20rpx;

					.price {
						font-size: 32rpx;
						color: #FF0000;
					}
				}

				.payBtn {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 40rpx;
					padding: 16rpx 20rpx;
					margin: 0;
					border: none;
					background: #F95D53;
					border-radius: 52rpx;
				}

				.payBtnDis {
					background: #999999;
				}
			}
		}
	}

	.choose {
		width: 40rpx;
		height: 40rpx;
	}

	.tipsBox {
		width: 550rpx;
		height: 418rpx;
		padding-top: 64rpx;
		flex-direction: column;

		.tipsTitle {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 40rpx;
		}



		.failReason {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #736464;
			line-height: 40rpx;
			margin-top: 48rpx;
		}

		.tipsLine {
			width: 100%;
			height: 2rpx;
			background-color: #EBEDF0;
			margin-top: 64rpx;
		}

		.tipsBtnBox {
			margin-top: 40rpx;

			.sureBtn {
				padding: 0;
				margin: 0 26rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				width: 200rpx;
				height: 72rpx;
				background: #F2615F;
				border-radius: 52rpx;
				border: none;
			}
		}
	}
</style>
